<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>无敌猜歌王</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />  
    <script src="jquery-2.1.1.min.js"></script> <!-- Bootstrap 核心 js 文件 -->
    <style type="text/css">
    #music {
        width: 300px;
        height: 300px;
        border-radius: 20px;
        margin: 10px auto;
        position: relative;
        background: url('头像.png');
        /*background: rgba(255, 255, 255, 0.6);*/
        background-size: cover;
        text-align: center;
        display: flex;
    }

    #music img {
        width: 145px;
        height: 145px;
    }
    #music h3 {
        width: 150px;
        height: 40px;
        margin: 0 auto;
        padding-top: 10px;
        text-align: center;
        font-family: Comic Sans MS;
        /* background-color: aquamarine; */
    }
    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 95px;
        bottom: 0;
        width: 310px;
        height: 200px;
        text-align: center;
        /*background: rgba(255, 255, 255, 0.6);*/
    }

    .btn {
        width: 250px;
        margin: auto;
        margin-bottom: 10px;
        margin-top: -46px;
        position: relative;
        outline: none;
    }

    .butn {
        border-radius: 20px;
        width: 75px;
        height: 32px;
        margin-left: 5px;
        background-color: #bcf57f;
        transition-duration: 0.6s;
        border: 1px solid #808080;
        outline: none;
    }

    .butn:hover {
        border-radius: 4px;
        background-color: #8dcf63;
        color: white;
        transform: scale(1.1);
    }

    #text {
        width: 162px;
        height: 28px;
        border-radius: 5px;
    }

    .pic_rot {
        -webkit-animation: rot 8s linear infinite;
        -moz-animation: rot 8s linear infinite;
        -ms-animation: rot 8s linear infinite;
        -o-animation: rot 8s linear infinite;
        animation: rot 8s linear infinite;
    }

    @-webkit-keyframes rot {
        form {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .rule {
        width: 295px;
        height: 165px;
        border-radius: 10px;
        background-color: #8db5e3;
        margin: auto;
    }

    .show {
        width: 276px;
        height: 175px;
        margin: auto;
        background-color: #79d9c1;
        padding-top: 15px;
        padding-left: 15px;
        margin-top: 10px;
        border-radius: 10px;
    }

    .show_1 {
        margin-bottom: 10px;
    }
    </style>
</head>

<body>
    <div id="music">
        <h3>无敌猜歌王</h3>
        <div id="container">
            <img id="musicImg" title="氢气球作品" style="border-radius: 400px; " src="http://p2.music.126.net/2pFqN1pyqF2DHdSt1hQ10Q==/109951163063456206.jpg">
            <audio style="display: none" width="500" controls src=" " controls id="audio"></audio>
        </div>
    </div>
    <div class="btn">
        <button id="playgame" class="butn" onclick="play();">开始游戏</button>
        <button id="end_btn" class="butn" onclick="endplay();" disabled="disabled">结束游戏</button>
        <button id="next" class="butn" onclick="tiaoguo();" disabled="disabled">跳过</button>
    </div>
    <div class="rule">
        <h4 style="width:80px;margin: auto;padding-top: 10px;">规则说明</h4>
        <div style="width:215px; margin:auto;margin-top: 15px; font-size: 15px;">
            点击开始游戏，每首歌限时90秒<br><br>
            超时将被视为答错<br><br>
            每首歌只有一次回答机会<br><br>
        </div>
    </div>
    <div class="show" style="display: none">
        <div class="show_1" id="song_index">&emsp;当前为： 第 <span id="song_index_1">1</span> 首</div>
        <div class="show_1" id="time" style="display: block;">&emsp;剩余时间: <span id="time_1">90</span></div>
        <div class="show_1">&emsp;答对: <span id="ture_ans">0</span>&emsp;&emsp;答错: <span id="false_ans">0</span></div>
        <div class="show_1"><span id="score_pre">&emsp;分数: </span><span id="score">0</span></div>
        <input id="text" type="text" placeholder="&emsp;请输入歌名">
        <input id="submit" class="butn" type="submit" name="确定" onclick="submit_result();">
    </div>
    <div>
    </div>
    <script type="text/javascript">
    var music = [
        'http://music.163.com/song/media/outer/url?id=519136840.mp3',
        'http://music.163.com/song/media/outer/url?id=864100348.mp3',
        'http://music.163.com/song/media/outer/url?id=66282.mp3',
        'http://music.163.com/song/media/outer/url?id=32507038.mp3',
        'http://music.163.com/song/media/outer/url?id=27808044.mp3',
        'http://music.163.com/song/media/outer/url?id=569213220.mp3',
        'http://music.163.com/song/media/outer/url?id=1390480881.mp3',
        'http://music.163.com/song/media/outer/url?id=1304302909.mp3',
        'http://music.163.com/song/media/outer/url?id=65766.mp3',
        'http://music.163.com/song/media/outer/url?id=1396235703.mp3'
    ];
    var Music_pic = [
        'http://p2.music.126.net/2pFqN1pyqF2DHdSt1hQ10Q==/109951163063456206.jpg',
        'http://p2.music.126.net/VhZZLvHB4XZ7SAvyjOBuRw==/109951163390551292.jpg',
        'http://p1.music.126.net/Bl1hEdJbMSj5YJsTqUjr-w==/109951163520311175.jpg',
        'http://p2.music.126.net/qpvBqYIqkRhO9Ry2qOCdJQ==/2942293117852634.jpg',
        'http://p2.music.126.net/WPHmBisDxnoF4DrBLKwl3Q==/109951163169021112.jpg',
        'http://p1.music.126.net/vmCcDvD1H04e9gm97xsCqg==/109951163350929740.jpg',
        'http://p2.music.126.net/ZjWhERuCE8slMan5EzX96w==/109951164358745101.jpg',
        'http://p2.music.126.net/nCyMkjJZeBlLPRaBriVG1Q==/109951163497159572.jpg',
        'http://p1.music.126.net/PcJq6i7zMcPgudejdn1yeg==/109951163256302356.jpg',
        'http://p2.music.126.net/2x-1zyE4RSpREjch4DUDlw==/109951164420159079.jpg'

    ]
    var Music_name = [
        '只只', '旧诗', '浮夸', '演员', '丑八怪', '像我这样的人', '风铃', '摸摸它', '富士山下', '红玫瑰'
    ]

    //定时函数
    function timer() {
        time--;
        $('#time_1').text(time);
        if (time == 0) {
            tiaoguo();
            time = 90;
        }
    }

    var boolean = 1;
    var set_timer;//定时器

    //开始游戏
    function play() {
        $('.rule').hide();//隐藏规则
        $('.show').show();//显示面板
        console.log("判断值为： " + boolean)
        if (boolean == 1) {
            $('#end_btn').removeAttr("disabled");
            $('#next').removeAttr("disabled");

            $('#playgame').text("重新开始");
            next();
            $('#musicImg').addClass('pic_rot');

            $('#time').show();
            console.log(timer)
            set_timer = setInterval(timer, 1000);
            console.log(timer)
            boolean = 0;
        } else {
            location.reload();
        }

    }

    //结束游戏
    function endplay() {
        $('#end_btn').attr("disabled", "disabled");
        $('#next').attr("disabled", "disabled");

        $('#song_index').hide();

        $('#text').hide();
        $('#submit').hide();

        $('#time').hide();

        $('#audio')[0].pause(); //暂停播放
        $('#musicImg').removeClass('pic_rot');

        $('#score_pre').text("游戏结束，您的分数为：");
        $('#score').text(ture_ans);

        clearInterval(set_timer);

        $('.show_1').css("margin-top", "40px");
        $('.show_1').css("margin-left", "40px");
    }

    //跳过歌曲
    function tiaoguo() {
        next();

        false_ans++;
        if (false_ans > 10) {
            false_ans = 10;
        }
        $('#false_ans').text(false_ans);
    }

    //跳过
    var num = -1;
    var time = 91;

    //播放下一首
    function next() {
        num++;
        if (num == 10) { //临界判断
            endplay();
        } else {
            console.log(music[num] + " " + Music_pic[num] + " " + Music_name[num]);
            $("#audio").attr("src", music[num]); //歌曲播放链接
            $('#musicImg').attr("src", Music_pic[num]); //歌曲图片
            $('#audio')[0].play(); //播放
            $('#audio')[0].currentTime = 45; //播放


            $('#song_index_1').text(num + 1); //提示下标加一
            $('#text').val(""); //清空输入框

            //时间重置
            time = 91;
            timer();
        }
    }


    var score = 0;
    var ture_ans = 0;
    var false_ans = 0;

    function submit_result() {
        var value = $('#text').val();
        if (value == Music_name[num]) {
            score++;
            ture_ans++;
            $('#ture_ans').text(ture_ans);

        } else {
            false_ans++;
            $('#false_ans').text(false_ans);
        }
        $('#score').text(score);
        next();
    }
    </script>
</body>

</html>